<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/main.css"/>
    <link rel="stylesheet" type="text/css" href="css/more.css"/>
    <script src="/js/vue.global-3.2.45.js"></script>
    <script src="/js/axios-1.2.1.js"></script>
    <title>更多 | 外卖配送信息系统</title>
</head>
<body>
<div class="M-More" id="more-app">
    <div>
        <h4 style="font-size: 25px">数据统计</h4>
        <span id="blockCount">区域数量：{{ totalInfo.blockCount }}</span>&nbsp;
        <span id="groupCount">组别数量：{{ totalInfo.groupCount }}</span>&nbsp;
        <br/>
        <span id="adminCount">管理员数量：{{ totalInfo.adminCount }}</span>&nbsp;
        <span id="senderCount">配送员数量：{{ totalInfo.senderCount }}</span>&nbsp;
        <span id="takeoutCount">外卖数量：{{ totalInfo.takeawayCount }}</span>
    </div>

    <br/>
    <hr/>
    <div>
        <a href="/page">
            <img src="/img/back.png" alt="back">
        </a><br/>
        <a href="javascript:(0)" id="addTakeoutTag" @click="moreType = 'takeaway'">添加外卖</a>&nbsp;
        <a href="javascript:(0)" id="addSenderTag" @click="moreType = 'sender'">添加配送员</a>&nbsp;
        <a href="javascript:(0)" id="addAdminTag" @click="moreType = 'admin'">添加管理员</a>&nbsp;
        <br/>
        <a href="javascript:(0)" id="addGroupTag" @click="moreType = 'group'">添加组别</a>&nbsp;
        <a href="javascript:(0)" id="addBlockTag" @click="moreType = 'block'">添加区域</a>
    </div>

    <br/>
    <div id="allChangeView">
        <div class="addTakeoutView" id="addTakeoutView" v-show="moreType === 'takeaway'">
            <form>
                <label>收货人:<br/>
                    <input type="text" placeholder="（可选）" id="customerName" v-model="takeawayInfo.userName"/>
                </label>
                <br/>
                <label>收货号码:<br/>
                    <input type="text" id="customerPhone" v-model="takeawayInfo.phone"/>
                </label>
                <br/>
                <label>备注:<br/>
                    <input type="text" placeholder="（可选）" id="detail" v-model="takeawayInfo.detail"/>
                </label>
                <br/>
                <label id="selectBlock_addT" @click="changeBlockSelect">区域:<br/>
                    <select @change="changeGroupSelect('takeaway')" v-model="takeawayInfo.blockName">
                        <option v-for="blockName in blocks" :value="blockName" :key="blockName">{{ blockName }}</option>
                    </select>
                </label>
                <br/>
                <label id="selectGroup_addT">组别:<br/>
                    <select v-model="takeawayInfo.groupName">
                        <option v-for="groupName in groups" :value="groupName" :key="groupName">{{ groupName }}</option>
                    </select>
                </label>

                <br/>
                <br/>
                <label>
                    <input type="button" value="添加外卖" @click="addTakeaway"/>
                </label>
            </form>
        </div>

        <div class="addSenderView" id="addSenderView" v-show="moreType === 'sender'">
            <form>
                <label>姓名:<br/>
                    <input type="text" placeholder="（可选）" id="senderName" v-model="senderInfo.name"/>
                </label>
                <br/>
                <label>号码:<br/>
                    <input type="text" id="senderPhone" v-model="senderInfo.phone"/>
                </label>
                <br/>
                <label>密码:<br/>
                    <input type="text" id="senderPassword" v-model="senderInfo.password"/>
                </label>
                <br/>
                <label id="selectBlock_addS" @click="changeBlockSelect">区域:<br/>
                    <select @change="changeGroupSelect('sender')" v-model="senderInfo.blockName">
                        <option v-for="blockName in blocks" :value="blockName" :key="blockName">{{ blockName }}</option>
                    </select>
                </label>
                <br/>
                <label id="selectGroup_addS">组别:<br/>
                    <select v-model="senderInfo.groupName">
                        <option v-for="groupName in groups" :value="groupName" :key="groupName">{{ groupName }}</option>
                    </select>
                </label>
                <br/>
                <br/>
                <label>
                    <input type="button" value="添加配送员" @click="addSender"/>
                </label>
            </form>
        </div>

        <div class="addAdminView" id="addAdminView" v-show="moreType === 'admin'">
            <form>
                <label>姓名:<br/>
                    <input type="text" placeholder="（可选）" id="adminName" v-model="adminInfo.name"/>
                </label>
                <br/>
                <label>号码:<br/>
                    <input type="text" id="adminPhone" v-model="adminInfo.phone"/>
                </label>
                <br/>
                <label>密码:<br/>
                    <input type="text" id="adminPassword" v-model="adminInfo.password"/>
                </label>
                <br/>
                <label id="selectBlock_addA" @click="changeBlockSelect">区域:<br/>
                    <select v-model="adminInfo.blockName">
                        <option v-for="blockName in blocks" :value="blockName" :key="blockName">{{ blockName }}</option>
                    </select>
                </label>
                <br/>
                <br/>
                <label>
                    <input type="button" value="添加管理员" @click="addAdmin"/>
                </label>
            </form>
        </div>

        <div class="addGroupView" id="addGroupView" v-show="moreType === 'group'">
            <form>
                <label>名称:<br/>
                    <input type="text" id="groupName" v-model="groupInfo.groupName"/>
                </label>
                <br/>
                <label>详细:<br/>
                    <input type="text" placeholder="（可选）" id="groupInfo" v-model="groupInfo.info"/>
                </label>
                <br/>
                <label id="selectBlock_addG" @click="changeBlockSelect">区域:<br/>
                    <select v-model="groupInfo.blockName">
                        <option v-for="blockName in blocks" :value="blockName" :key="blockName">{{ blockName }}</option>
                    </select>
                </label>
                <br/>
                <br/>
                <label>
                    <input type="button" value="添加组别" @click="addGroup"/>
                </label>
            </form>
        </div>

        <div class="addBlockView" id="addBlockView" v-show="moreType === 'block'">
            <form>
                <label>名称:<br/>
                    <input type="text" id="blockName" v-model="blockInfo.blockName"/>
                </label>
                <br/>
                <label>详细:<br/>
                    <input type="text" placeholder="（可选）" id="blockInfo" v-model="blockInfo.info"/>
                </label>
                <br/>
                <br/>
                <label>
                    <input type="button" value="添加区域" @click="addBlock"/>
                </label>
            </form>
        </div>
    </div>
    <br/>
    <p id="moreHint" style="color: red; text-align: center">{{ moreHint }}</p>
</div>
</body>
<script type="text/javascript" src="js/more.js"></script>
</html>
